<template>
  <div>
    <div class="container">
      <form>
        <div style="margin-top: 3%;">个人信息更改</div>
        <div class="item">
          <div class="word">用户名：</div>
          <input type="text" v-model="user.username">
        </div>
        <div class="item">
          <div class="word">密码：</div>
          <input type="password" v-model="user.password">
        </div>
        <div class="item">
          <div class="word">邮箱：</div>
          <input type="text" v-model="user.email">
        </div>
        <div class="item">
          <div class="word">地址：</div>
          <input type="text" v-model="user.address">
        </div>
        <div class="item">
          <div class="word">手机号：</div>
          <input type="text" v-model="user.phone">
        </div>
        <el-button type="primary" plain @click="updateConfig">确定</el-button>
      </form>
    </div>
  </div>
</template>

<script>
import {ElNotification} from "element-plus";

export default {
  name: "SelfConfig",
  data() {
    return {
      user: {},
      userId: this.$store.state.user.id
    }
  },
  created() {
    this.loadConfig()
  },
  methods: {
    loadConfig() {
      this.$axios.get("SelectUserById", {params: {id: this.userId}})
          .then(success => {
            if (success.data.code === 200) {
              this.user.username = success.data.data.username;
              this.user.password = success.data.data.password
              this.user.email = success.data.data.email
              this.user.address = success.data.data.address
              this.user.phone = success.data.data.phone
            } else {
              alert(success.data.message)
            }
          }).catch(fail => {
        console.log(fail);
      })
    },
    updateConfig() {
      this.$axios.post("updateUser", {
        id: this.userId,
        username:this.user.username,
        password:this.user.password,
        email:this.user.email,
        address:this.user.address,
        phone:this.user.phone
      })
          .then(success => {
            if (success.data.code === 200) {
              this.open1()
              location.reload()
            } else {
              alert(success.data.message)
            }
          }).catch(fail => {
        console.log(fail);
      })
    },
    open1() {
      ElNotification({
        title: 'Success',
        message: '更新成功',
        type: 'success',
      })
    }
  }
}
</script>
<style scoped>
.container {
  display: flex; /**/
  justify-content: center; /*水平居中*/
  margin: 5% auto 0;
  box-shadow: 3px 3px 8px 3px #ccc;
  width: 600px;
  font-size: 20px;
  font-family: "Microsoft YaHei";
}
.word {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: auto;
}
.item {
  width: 450px;
  height: 50px;
  display: flex;
  align-items: center;
  margin: 5%;
}
input {
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 350px;
  height: 35px;
  position: relative;
  right: 0px;
  font-size: 20px;
  font-family: "Microsoft YaHei";
}
input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
</style>